<!-- 库房管理---物料需求 -->
<script lang="ts">
export default {
  name: "materialDemand"
};
</script>
<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import { VXETable } from "vxe-table";
import { getProcessAll } from "/@/api/basic/workprocedure";
import { dateFormatYMD } from "/@/utils/date";
import {
  queryMaterialDemandPage,
  addMaterialDemand,
  queryMaterialDemandById,
  addMaterialDemandRetreatHist
} from "/@/api/wms/materialDemand";
// import { queryMaterialList } from "/@/api/basic/material";
import { errorMessage, successMessage, alertMessage } from "/@/utils/message";
import { ElForm } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});
const table = reactive({
  loading: false,
  tableData: [] as any[],
  tableHeight: 0, //表格高度
  listQuery: {
    date: "",
    endCashingDate: "",
    startCashingDate: "",
    taskNo: "",
    prodOrderNo: "",
    planStatus: 2
  }
});

// 查询
const searchEvent = () => {
  const data: any = {};
  data.prodOrderNo = table.listQuery.prodOrderNo;
  data.planStatus = table.listQuery.planStatus;
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  procedure.loading = true;
  if (table.listQuery.date) {
    data.startCashingDate =
      dateFormatYMD(table.listQuery.date[0]) + " 00:00:00";
    data.endCashingDate = dateFormatYMD(table.listQuery.date[1]) + " 23:59:59";
  } else {
    data.startWorkConfimDate = "";
    data.endWorkdConfimDate = "";
  }
  queryMaterialDemandPage(data).then((res: any) => {
    if (res.code === 0) {
      table.tableData = res.data.list;
      page.totalResult = res.data.total;
    }
    table.loading = false;
  });
};
//获取工序名称
const getProcess = () => {
  getProcessAll().then((res: any) => {
    if (res.code === 0) {
      procedure.processData = res.data;
    }
  });
};
// // 查询原料bom-全部
// const queryAllMaterial = async () => {
//   queryMaterialList().then((res: any) => {
//     if (res.code === 0) {
//       procedure.listData = res.data;
//     }
//   });
// };
// 分页发生改变时会触发该事件
const handlePageChange = ({ currentPage, pageSize }) => {
  page.pageNum = currentPage;
  page.pageRow = pageSize;
  searchEvent();
};
// 添加
const procedure = reactive({
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  pickEdit: false,
  tableData: [] as any[],
  processData: [] as any[],
  listData: [] as any[],
  goodsData: [] as any[],
  idsDo: {
    ids: []
  },
  formData: {
    taskNo: "",
    bnoNo: "",
    processStepName: "",
    maintainPlanId: "",
    materialPlanItems: [],
    processStepId: ""
  },
  formRules: {
    maintainPlanId: [
      { required: true, message: "请选择生产订单编号", trigger: "blur" }
    ],
    processStepId: [{ required: true, message: "请选择工序", trigger: "blur" }],
    planStatus: [
      { required: true, message: "请选择下发状态", trigger: "blur" }
    ],
    cashingDate: [
      { required: true, message: "请选择预计领取时间", trigger: "blur" }
    ]
  },
  picking: [
    { label: "是", value: 1 },
    { label: "否", value: 0 }
  ]
});

const addRepair = () => {
  procedure.formData.materialPlanItems.push({
    id: 0,
    materialPlanId: 0,
    bomId: "",
    receiveNum: 0
  });
};
// 领料
// const insertEvent =  () => {
//   procedure.selectRow = null;
//   procedure.showEdit = true;
//   procedure.pickEdit = false;
//   addRepair();
// };
// 退料
const reply = reactive({
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  pickEdit: false,
  tableData: [] as any[],
  processData: [] as any[],
  listData: [] as any[],
  goodsData: [] as any[],
  idsDo: {
    ids: []
  },
  formData: {
    taskNo: "",
    bnoNo: "",
    processStepName: "",
    materialPlanId: "",
    materialPlanItems: [],
    processStepId: ""
  },
  formRules: {
    materialPlanId: [
      { required: true, message: "请选择生产订单编号", trigger: "blur" }
    ],
    processStepId: [{ required: true, message: "请选择工序", trigger: "blur" }],
    planStatus: [
      { required: true, message: "请选择下发状态", trigger: "blur" }
    ],
    cashingDate: [
      { required: true, message: "请选择预计领取时间", trigger: "blur" }
    ]
  },
  picking: [
    { label: "是", value: 1 },
    { label: "否", value: 0 }
  ]
});
// 退料
const replyForm = ref<InstanceType<typeof ElForm>>();
const replyEvent = async (row: any) => {
  reply.showEdit = true;
  reply.pickEdit = true;
  reply.selectRow = row;
};
const prodOrderNoChange = (id: any) => {
  console.log(id);
  if (id) {
    queryMaterialDemandById(id).then((res: any) => {
      if (res.code === 0) {
        reply.submitLoading = false;
        reply.formData = res.data;
        reply.formData.materialPlanItems.map((item, index) => {
          item.retreatNum = 0;
        });
        reply.formData.materialPlanId = id;
      } else {
        errorMessage(res.message);
      }
    });
  } else {
    reply.formData = {
      taskNo: "",
      bnoNo: "",
      processStepName: "",
      materialPlanId: "",
      materialPlanItems: [],
      processStepId: ""
    };
  }
};
const insertReply = () => {
  var bool1 = false;
  if (reply.formData.materialPlanItems.length > 0) {
    for (var i = 0; i < reply.formData.materialPlanItems.length; i++) {
      let data = reply.formData.materialPlanItems[i];
      Object.keys(data).forEach(key => {
        if (key == "retreatNum") {
          data[key] == 0 ? (bool1 = true) : null;
        }
      });
    }
    if (bool1) {
      alertMessage("数量不能为0", "提示");
      return;
    }
  } else {
    alertMessage("请填写详情信息", "提示");
    return;
  }
  replyForm.value.validate(valid => {
    if (valid) {
      reply.submitLoading = true;
      // 新增
      addMaterialDemandRetreatHist(reply.formData.materialPlanItems)
        .then((res: any) => {
          if (res.code === 0) {
            replyClose();
            searchEvent();
            successMessage("新增成功");
          } else {
            reply.submitLoading = false;
            errorMessage(res.message);
          }
        })
        .catch(() => {
          errorMessage("操作失败");
          procedure.submitLoading = false;
        });
    }
  });
};
const replyClose = () => {
  nextTick(() => {
    reply.submitLoading = false;
    reply.showEdit = false;
  });
};
// 子项单独领料
const pickEvent = async (row: any) => {
  procedure.showEdit = true;
  procedure.pickEdit = true;
  procedure.selectRow = row;
  queryMaterialDemandById(row.id).then((res: any) => {
    if (res.code === 0) {
      procedure.submitLoading = false;
      procedure.formData = res.data;
      procedure.formData.materialPlanItems.map((item, index) => {
        item.receiveNum = 0;
      });
      procedure.formData.maintainPlanId = row.id;
    } else {
      errorMessage(res.message);
    }
  });
};

const detailData = reactive({
  loading: false,
  submitLoading: false,
  selectRow: null,
  showEdit: false,
  pickEdit: false,
  showFormData: {} as any
});

// 查看详情
const editEvent = async (row: any) => {
  detailData.showEdit = true;
  queryMaterialDemandById(row.id).then((res: any) => {
    if (res.code === 0) {
      console.log(res.data);
      detailData.submitLoading = false;
      detailData.showFormData = res.data;
    } else {
      errorMessage(res.message);
    }
  });
};
// 删除
const dele = i => {
  procedure.formData.materialPlanItems.splice(i, 1);
};
// 名称改变时的变化
const codeChange = () => {
  // procedure.formData.taskNo
  if (procedure.formData.maintainPlanId) {
    var arr = procedure.goodsData.filter(
      item => item.id == procedure.formData.maintainPlanId
    )[0];
    procedure.formData.processStepId = arr.processStepId;
    procedure.formData.bnoNo = arr.bnoNo;
  } else {
    procedure.formData.processStepId = "";
    procedure.formData.bnoNo = "";
  }
};

// 分页查询所有的货品
const getAllWh = (target: any) => {
  var str = "" as string;
  if (target && target.target.value) {
    str = target.target.value;
  }
  const data: any = {};
  Object.assign(data, table.listQuery);
  data.pageNum = page.pageNum;
  data.pageRow = page.pageRow;
  data.name = str;
  queryMaterialDemandPage(data).then((res: any) => {
    if (res.code === 0) {
      procedure.goodsData = res.data.list;
    }
  });
};
const checkRoleNameUnique = () => {
  var selectData = [];
  Object.keys(procedure.formData.materialPlanItems).forEach(key => {
    if (procedure.formData.materialPlanItems[key].bomId) {
      selectData.push(procedure.formData.materialPlanItems[key].bomId);
    }
  });
  if (new Set(selectData).size !== selectData.length) {
    VXETable.modal.alert("当前有信息的编码或名称重复，请核对信息");
    return false;
  }
  return true;
};
// 入库表单提交
const insertForm = ref<InstanceType<typeof ElForm>>();

const submitEvent = () => {
  var bool = false;
  var bool1 = false;
  if (procedure.formData.materialPlanItems.length > 0) {
    for (var i = 0; i < procedure.formData.materialPlanItems.length; i++) {
      let data = procedure.formData.materialPlanItems[i];
      Object.keys(data).forEach(key => {
        if (key == "bomId") {
          data[key] == "" ? (bool = true) : null;
        }
        if (key == "receiveNum") {
          data[key] == 0 ? (bool1 = true) : null;
        }
      });
    }
    if (bool) {
      alertMessage("请将数据填写完整", "提示");
      return;
    }
    if (bool1) {
      alertMessage("领取数量不能为0", "提示");
      return;
    }
  } else {
    alertMessage("请填写详情信息", "提示");
    return;
  }
  if (!checkRoleNameUnique()) {
    return;
  }
  insertForm.value.validate(valid => {
    if (valid) {
      procedure.submitLoading = true;
      // 新增
      addMaterialDemand(procedure.formData)
        .then((res: any) => {
          if (res.code === 0) {
            handleClose();
            searchEvent();
            successMessage("新增成功");
          } else {
            procedure.submitLoading = false;
            errorMessage(res.message);
          }
        })
        .catch(() => {
          errorMessage("操作失败");
          procedure.submitLoading = false;
        });
    }
  });
};
const detailClose = () => {
  nextTick(() => {
    detailData.showFormData = {} as any;
    detailData.submitLoading = false;
    detailData.showEdit = false;
  });
};
const handleClose = () => {
  nextTick(() => {
    procedure.formData = {
      taskNo: "",
      bnoNo: "",
      processStepName: "",
      maintainPlanId: "",
      materialPlanItems: [],
      processStepId: ""
    };
    procedure.submitLoading = false;
    procedure.pickEdit = false;
    procedure.showEdit = false;
  });
};
// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    searchEvent();
    getProcess();
    // queryAllMaterial();
    table.tableHeight = changeHeight();
  });
});
</script>
<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="生产订单编号">
        <template #default="{ data }">
          <vxe-input
            v-model="data.prodOrderNo"
            placeholder="请输入生产订单编号"
          ></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="预计领取时间" field="date">
        <template #default="{ data }">
          <el-date-picker
            v-model="data.date"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button
            icon="fa fa-search"
            status="primary"
            @click="searchEvent"
            v-auth="routeName + ':search'"
            >查询</vxe-button
          >
          <!-- <vxe-button
            icon="fa fa-hand-rock-o"
            status="primary"
            @click="insertEvent"
            v-auth="routeName + ':add'"
            >领料</vxe-button
          > -->
          <vxe-button
            icon="fa fa-reply"
            status="primary"
            @click="replyEvent"
            v-auth="routeName + ':add'"
            >退料</vxe-button
          >
        </template>
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-table
      ref="xTable"
      class="mytable-style"
      border
      show-header-overflow
      show-overflow
      :row-config="{ isHover: true }"
      :print-config="{}"
      :export-config="{}"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="bnoNo" title="销售单号" min-width="150"></vxe-column>
      <vxe-column
        field="custName"
        title="客户名称"
        min-width="150"
      ></vxe-column>
      <vxe-column field="taskNo" title="任务编号" min-width="150"></vxe-column>
      <vxe-column
        field="prodOrderNo"
        title="生产订单编号"
        min-width="180"
      ></vxe-column>
      <vxe-column field="cashingDate" title="预计领取时间" min-width="120">
        <template #default="{ row }">
          {{ row.cashingDate ? row.cashingDate.split(" ")[0] : "" }}
        </template>
      </vxe-column>
      <vxe-column
        field="deviceName"
        title="设备名称"
        min-width="160"
      ></vxe-column>
      <vxe-column
        field="processStepName"
        title="工序名称"
        min-width="100"
      ></vxe-column>
      <!-- <vxe-column field="materialStatus" title="是否已领料">
        <template #default="{ row }">
          {{ row.materialStatus == 0 ? "未领" : "已领" }}
        </template>
      </vxe-column> -->
      <vxe-column title="操作" width="120" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-eye"
            @click="editEvent(row)"
            v-auth="routeName + ':checkDetail'"
            >查看详情</vxe-button
          >
          <vxe-button
            type="text"
            icon="fa fa-hand-rock-o"
            @click="pickEvent(row)"
            v-auth="routeName + ':pick'"
            >领料</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 分页 -->
    <vxe-pager
      perfect
      @page-change="handlePageChange"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageRow"
      :total="page.totalResult"
      :page-sizes="[10, 20, 50, 100, 300]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
    >
    </vxe-pager>
    <!-- 领料弹框 -->
    <el-dialog
      v-model="procedure.showEdit"
      title="新增&保存"
      top="7vh"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        :model="procedure.formData"
        :rules="procedure.formRules"
        label-align="right"
        label-width="160px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item
              prop="maintainPlanId"
              label="生产订单编号"
              v-if="!procedure.pickEdit"
            >
              <el-select
                v-model="procedure.formData.maintainPlanId"
                filterable
                clearable
                placeholder="请选择"
                size="small"
                style="width: 100%"
                @keyup="getAllWh"
                @clear="getAllWh"
                @blur="getAllWh"
                @focus="getAllWh"
                @change="codeChange"
              >
                <el-option
                  v-for="item in procedure.goodsData"
                  :key="item.id"
                  :label="item.taskNo + '（' + item.processStepName + '）'"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="taskNo" label="生产订单编号" v-else>
              <el-input
                v-model="procedure.formData.taskNo"
                placeholder="请输入订单编号"
                size="small"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="销售单号">
              <el-input
                v-model="procedure.formData.bnoNo"
                placeholder="请输入订单编号"
                size="small"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="processStepId" label="工序名称">
              <el-select
                v-if="!procedure.pickEdit"
                v-model="procedure.formData.processStepId"
                size="small"
                filterable
                placeholder="请选择工序"
                style="width: 100%"
                :disabled="procedure.selectRow ? true : false"
              >
                <el-option
                  v-for="item in procedure.processData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-input
                v-else
                v-model="procedure.formData.processStepName"
                size="small"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button
          v-if="!procedure.pickEdit"
          type="primary"
          size="small"
          @click="addRepair"
          >添加</el-button
        >
      </el-form>
      <el-table
        stripe
        :data="procedure.formData.materialPlanItems"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column label="料号">
          <template #default="scope">
            <el-select
              v-model="scope.row.bomId"
              placeholder="请选择料号"
              style="width: 100%"
              size="small"
            >
              <el-option
                v-for="item in procedure.listData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="计划领取数量"
          prop="useNum"
          width="100"
          v-if="procedure.selectRow"
        ></el-table-column>
        <el-table-column
          label="已领取数量"
          prop="receivedNum"
          width="100"
          v-if="procedure.selectRow"
        ></el-table-column>
        <el-table-column
          label="已退料数量"
          prop="retreatNum"
          width="100"
          v-if="procedure.selectRow"
        ></el-table-column>
        <el-table-column label="领取数量" prop="receiveNum" width="200">
          <template #default="scope">
            <el-input-number
              size="small"
              v-model="scope.row.receiveNum"
              :min="0"
              :precision="2"
              :step="0.1"
              placeholder="请输入领取数量"
            ></el-input-number> </template
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" @click="dele(scope.$index)" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <vxe-button @click="handleClose">取 消</vxe-button>
        <vxe-button status="primary" @click="submitEvent">确 定</vxe-button>
      </template>
    </el-dialog>
    <!-- 退料弹框 -->
    <el-dialog
      v-model="reply.showEdit"
      title="新增&保存"
      top="7vh"
      width="80%"
      :before-close="replyClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="replyForm"
        :model="reply.formData"
        :rules="reply.formRules"
        label-align="right"
        label-width="160px"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="materialPlanId" label="生产订单编号">
              <el-select
                v-model="reply.formData.materialPlanId"
                filterable
                clearable
                placeholder="请选择"
                size="small"
                style="width: 100%"
                @keyup="getAllWh"
                @clear="getAllWh"
                @blur="getAllWh"
                @focus="getAllWh"
                @change="prodOrderNoChange"
              >
                <el-option
                  v-for="item in procedure.tableData"
                  :key="item.id"
                  :label="
                    item.prodOrderNo +
                    '（' +
                    item.processStepName +
                    (item.cashingDate
                      ? '/' + item.cashingDate.split(' ')[0]
                      : '') +
                    '）'
                  "
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="销售单号">
              <el-input
                v-model="reply.formData.bnoNo"
                placeholder="请输入订单编号"
                size="small"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="processStepId" label="工序名称">
              <el-input
                v-model="reply.formData.processStepName"
                size="small"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        stripe
        :data="reply.formData.materialPlanItems"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column label="料号" prop="bomName"></el-table-column>
        <el-table-column
          label="计划领取数量"
          prop="useNum"
          width="100"
        ></el-table-column>
        <el-table-column
          label="已领取数量"
          prop="receivedNum"
          width="100"
        ></el-table-column>
        <el-table-column
          label="已退料数量"
          prop="retreatedNum"
          width="100"
        ></el-table-column>
        <el-table-column label="退料数量" prop="retreatNum" width="200">
          <template #default="scope">
            <el-input-number
              size="small"
              v-model="scope.row.retreatNum"
              :precision="2"
              :step="0.1"
              placeholder="请输入退料数量"
            ></el-input-number> </template
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" @click="dele(scope.$index)" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <vxe-button @click="replyClose">取 消</vxe-button>
        <vxe-button status="primary" @click="insertReply">确 定</vxe-button>
      </template>
    </el-dialog>
    <!-- 查看详情弹框 -->
    <el-dialog
      v-model="detailData.showEdit"
      title="查看详情"
      top="7vh"
      width="80%"
      :before-close="detailClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="insertForm"
        id="dialogForm"
        :model="detailData.showFormData"
        label-align="right"
        label-width="160px"
      >
        <el-divider content-position="left">基本信息</el-divider>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="销售单号">
              {{ detailData.showFormData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="taskNo" label="任务编号">
              {{ detailData.showFormData.taskNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="prodOrderNo" label="生产订单编号">
              {{ detailData.showFormData.prodOrderNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="deviceName" label="设备名称">
              {{ detailData.showFormData.deviceName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="processStepName" label="工序名称">
              {{ detailData.showFormData.processStepName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="cashingDate" label="预计领取时间">
              {{
                detailData.showFormData.cashingDate
                  ? detailData.showFormData.cashingDate.split(" ")[0]
                  : ""
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">详情</el-divider>
      </el-form>
      <el-table
        stripe
        :data="detailData.showFormData.materialPlanItems"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          fixed
        ></el-table-column>
        <el-table-column label="料号" prop="bomName"> </el-table-column>
        <el-table-column label="计划领取数量" prop="useNum"></el-table-column>
      </el-table>
      <template #footer>
        <vxe-button @click="detailClose">取 消</vxe-button>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
</style>
